<template>
  <div>
    <div class="tab-btn">
      <button
        class="btn"
        @click="selectScenario"
        :class="{ active: currentList === 'scenario-list' }"
      >
        想定列表
      </button>
      <button
        class="btn"
        @click="selectEquipment"
        :class="{ active: currentList === 'equipment-list' }"
      >
        装备列表
      </button>
    </div>
    <div>
      <component :is="currentList"></component>
    </div>
  </div>
</template>
<script>
import ScenarioList from "../../components/navList/scenario/index";
import equipmentList from "../../components/navList/equipment/index";
export default {
  components: {
    ScenarioList,
    equipmentList,
  },
  data() {
    return {
      currentList: "scenario-list",
    };
  },
  methods: {
    selectEquipment() {
      this.currentList = "equipment-list";
    },
    selectScenario() {
      this.currentList = "scenario-list";
    },
  },
};
</script>
<style scoped>
.tab-btn {
  /* display: flex; */
  /* justify-content: f; */
}
.btn {
  width: 50%;
  background-color: #041a3b;
  color: #9aa3b0;
  font-size: 15px;
  height: 35px;
  border: 1px solid #2a3c58;
}
.active {
  background-color: #00758c;
  color: #ffffff;
  border: 1px solid #29f8ff;
}
</style>
